<template>
  <div class="container" @click.stop="showLanguageHandel">
    <!-- <div class="shadowLeftTop-1"></div>
    <div class="shadowLeftTop-2"></div>
    <div class="shadowRightBottom"></div> -->
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <nuxt-link to="/">
            <div class="flex_">
              <img
                src="/static/logo.svg"
                class="img"
                alt="logo"
                width="34"
                height="34"
              />
              <span class="projectName">SavingTik</span>
            </div>
          </nuxt-link>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem tItemBlod bor">
            <nuxt-link to="/"> TikTok Downloader </nuxt-link>
          </div> -->
          <nuxt-link to="/download-tiktok-mp3">
            <div @click="goToTop('mp3')" class="tItem">Download TikTok MP3</div>
          </nuxt-link>
          <nuxt-link to="/download-tiktok-story">
            <div @click="goToTop('story')" class="tItem">
              Download TikTok Story
            </div>
          </nuxt-link>
          <language ref="languageRef"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="menu" />
        </div>
      </header>
      <div class="banner_box">
        <div class="banner flex_ccenter">
          <h1 class="h1">TikTok Video Download</h1>
          <h2 class="h2">- Tiktok Downloader, Without Watermark. Fast. -</h2>
        </div>
      </div>
      <div class="downloadInput flex_center">
        <div class="inputBox flex_between">
          <input
            type="text"
            v-model="input"
            @keydown="sendDownload($event)"
            @input="handleInput"
            @paste="handleInput"
            class="ipt"
            placeholder="Paste TikTok link here"
            :disabled="isHttpLoading"
          />
          <divdownSuccess
            class="clearx flex_ccenter"
            v-if="input != ''"
            @click.stop="input = ''"
          >
            <img src="/static/clear.png" class="img" alt="" />
          </divdownSuccess>
          <div
            class="downBtn shou flex_ccenter"
            :class="isHttpLoading ? 'isHttpLoading' : ''"
            @click.stop="Download"
          >
            <div class="downImg">
              <img src="/static/download.webp" class="img" alt="download" />
            </div>
            <div class="iptbtn">Download</div>
          </div>
          <div class="posi shou" v-if="input != ''" @click.stop="input = ''">
            <img src="/static/clear.png" class="img" alt="" />
          </div>
        </div>
      </div>
      <div class="downStorySuccess" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
          <div class="downBtn flex_ccenter shou" @click="allIn">
            Download All
          </div>
        </div>
        <div class="storyImageList flex_between">
          <div class="item" :key="k" v-for="(item, k) in downData.images">
            <client-only>
              <el-image
                style="width: 100%; height: 100%"
                fit="cover"
                :src="item"
                alt="Photo"
                :preview-src-list="downData.images"
              >
              </el-image>
            </client-only>
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img
                  src="/static/download.webp"
                  class="xiazai"
                  alt="download"
                />
                <div>Download Photo</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1 flex_between">
                <div class="tit flex_">
                  <div class="timg">
                    <img
                      src="/static/blue.webp"
                      class="img"
                      alt="blue square"
                    />
                  </div>
                  <div>{{ downData.nickname }}</div>
                </div>
                <div class="times flex_">
                  <img src="/static/time.png" class="img" alt="" />
                  {{ duration }}
                </div>
              </div>
              <div class="info_2">
                {{ downData.title }}
              </div>
              <div class="info_3">
                <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Without Watermark</div>
                    <div class="text2">{{ WithoutVideoSize }}</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.video_url,
                        'SavingTik-Without Watermark',
                        'video'
                      )
                    "
                  >
                    Download
                  </div>
                </div>
                <!-- <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Video Download</div>
                    <div class="text2">{{VideoSize }}</div>
                  </div>
                  <div class="downBtn flex_ccenter shou">Download</div>
                </div> -->
                <div class="item flex_between">
                  <div class="downLeft">
                    <div class="text1">Download MP3</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.mp3_url,
                        'SavingTik-Download MP3',
                        'mp3'
                      )
                    "
                  >
                    Download
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downStorySuccess_app" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
        </div>
        <div class="allDown flex_ccenter" @click="allIn">
          Download All Photo
        </div>
        <div class="storyImageList flex_between">
          <div
            class="item"
            @click.stop="previewImage(item, k)"
            :key="k"
            v-for="(item, k) in downData.images"
          >
            <img :src="item" class="img" alt="Photo" />
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click.stop="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img src="/static/appxiazai.png" class="xiazai" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess_app flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1">
                <div class="tit flex_">
                  <div class="timg">
                    <img src="/static/point.png" class="img" alt="" />
                  </div>
                  <div class="uname">{{ downData.title }}</div>
                </div>
              </div>
              <div class="info_2">{{ downData.nickname }}</div>
              <div class="times flex_between">
                <div></div>
                <div>Time — — {{ duration }}</div>
              </div>
            </div>
          </div>
          <div class="info_3">
            <div class="item flex_between">
              <div class="downLeft flex_column">
                <div class="text1">Without Watermark</div>
                <div class="text2">{{ WithoutVideoSize }}</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.video_url,
                    'SavingTik-Without Watermark',
                    'video'
                  )
                "
              >
                Download
              </div>
            </div>

            <div class="item flex_between">
              <div class="downLeft">
                <div class="text1">Download MP3</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.mp3_url,
                    'SavingTik-Download MP3',
                    'mp3'
                  )
                "
              >
                Download
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isHttpLoading">
        <div class="loading-dots flex_center">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="tips flex_center">
          <div class="tip">
            <img src="/static/tip.png" class="img" alt="prompt" />
          </div>
          <div>Retrieving data, please wait a few seconds!</div>
        </div>
      </div>
      <div class="error flex_ccenter" v-if="httpError">
        <div class="hono flex_">
          <img src="/static/tishi.png" class="img" alt="prompt" />
          <div>oh no~</div>
        </div>
        <div class="errMsg">
          The current link is wrong, please copy the correct link.
        </div>
      </div>
      <div class="declare">
        <div class="tit flex_center">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3" style="flex: 1">
            Download TikTok videos (Musically) Without Watermark for FREE
          </h3>
        </div>
        <div class="text_content">
          SavingTik is one of the best TikTok Downloaders available online to
          download video tiktok without a watermark. You are not required to
          install any software on your computer or mobile phone, all that you
          need is a TikTok video link, and all the processing is done on our
          side so you can be one click away from downloading videos to your
          devices.
        </div>
        <div class="app-link flex_center">
          <a
            href="https://play.google.com/store/apps/details?id=tiktok.tiktokdownload.nowatermark.video.downloader"
            target="_blank"
          >
            <img src="/static/google-play.webp" alt="Google Play" />
          </a>
          <a href="https://apps.apple.com/app/id6466972899" target="_blank">
            <img src="/static/IOS.webp" alt="APP Store" />
          </a>
        </div>
      </div>
      <div class="declare" style="margin-top: 10px">
        <div class="tit flex_center">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3" style="flex: 1">
            No watermark for better quality, which most of the tools out there
            can't.
          </h3>
        </div>
        <div class="text_content">
          <div>
            Download by using your browsers: I want to keep things simple for
            you. No need to download or install any software. I make an
            application for this purpose as well, but you can only install it
            whenever you like.
          </div>
          <div>
            It's always free. I only place some ads, which support maintaining
            our services, and further development.
          </div>
          <div>
            SavingTik provides users download each image in a slideshow to your
            computer and download images in batches.
          </div>
        </div>
      </div>
      <div class="next_content">
         
        <div class="introduction">
          <div class="introducItem flex_between">
            <div class="itemLeft">
              <h2 class="row_1">Download TikTok video</h2>
              <h2 class="row_2">on Android</h2>
              <div class="row_3 flex_">
                <div class="timg">
                  <img src="/static/blue.webp" class="img" alt="blue square" />
                </div>
                <h3 class="h3" style="flex: 1">
                  Here's how to use your Android device to download TikTok
                  videos:
                </h3>
              </div>
              <div class="row_4">
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    To obtain the URL, open the TikTok app, hit the "share"
                    icon, and select "Copy link."
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Go to SavingTik on your Android device by using any browser
                    app.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Click "Download" after pasting the URL into the space.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Select the desired download option and click "Download."
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Look within the Download folder for the file or files you
                    downloaded.
                  </div>
                </div>
              </div>
            </div>
            <div class="itemRight1">
              <img
                src="/static/android.webp"
                class="img"
                alt="download TikTok video on Android"
              />
            </div>
          </div>
          <div
            class="introducItem flex_between"
            style="align-items: flex-start"
          >
            <div class="itemRight2">
              <img
                src="/static/iphone.webp"
                class="img"
                alt="Download TikTok video on iPhone and iPad"
              />
            </div>
            <div class="itemLeft">
              <h2 class="row_12">Download TikTok video</h2>
              <h2 class="row_22 tright">
                no watermark on the iPhone and iPad.
              </h2>
              <div class="row_33 flex_">
                <div class="timg">
                  <img src="/static/red.webp" class="img" alt="red square" />
                </div>
                <h3 class="h3" style="flex: 1">
                  It will not be possible for you to download using a browser
                  due to Apple's Security Policy. Don't worry, though; we've
                  created an easy-to-follow instruction that will show you how
                  to utilize SavingTik to download TikTok videos fro."your
                  iPhone or iPad (iOS).
                </h3>
              </div>
              <div class="row_4">
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Open the App Store and install the "Document by Readdle"
                    app.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Launch the TikTok app, select "Copy link" from the menu, and
                    hit the "Share" button to obtain the video URL.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Tap the browser icon in the right corner to open the
                    document created by Readdle.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    After launching the browser, go to SavingTik.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Click "Download" after pasting the URL into the space.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    After selecting an option, click "Download."
                  </div>
                </div>
                <!-- <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">Your file will be saved to your device</div>
                </div> -->
              </div>
            </div>
          </div>
          <div
            class="introducItem flex_between"
            style="align-items: flex-start"
          >
            <div class="itemLeft">
              <h2 class="row_1">Download TikTok video</h2>
              <h2 class="row_2">with no watermark on the PC</h2>
              <div class="row_3 flex_">
                <div class="timg">
                  <img src="/static/blue.webp" class="img" alt="blue square" />
                </div>
                <h3 class="h3" style="flex: 1">
                  The instructions listed below will allow you to download
                  high-quality video TikTok from your PC.
                </h3>
              </div>
              <div class="row_4">
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    To obtain the link, select "Copy link" from the Tiktok app
                    or tiktok.com by hitting the "Share" button.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Visit SavingTik with the browser of your choice.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Copy the URL, then hit "Download" on the form.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Select a download choice and hit the download button.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    In the Download folder, locate the file or files you
                    downloaded.
                  </div>
                </div>
              </div>
            </div>
            <div class="itemRight3">
              <img
                src="/static/pc.webp"
                class="img"
                alt="Download TikTok video on PC"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_content_app" v-if="showSwiper">
      <div class="page_content">
        <div class="next_content">
          <div class="introduction_app">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item>
                <div class="introducItem flex_ccenter">
                  <div class="item_img1">
                    <img
                      src="/static/android.webp"
                      class="img"
                      alt="download TikTok video on Android"
                    />
                  </div>
                  <div class="item_img2 flex_ccenter">
                    <h2 class="swipert1">Download TikTok video</h2>
                    <h2 class="swipert2">on Android</h2>
                  </div>
                  <div class="item_3">
                    <h3 class="text_title">
                      Here's how to use your Android device to download TikTok
                      videos:
                    </h3>
                    <div class="row_4 flex_column">
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          To obtain the URL, open the TikTok app, hit the
                          "share" icon, and select "Copy link."
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Go to SavingTik on your Android device by using any
                          browser app.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Click "Download" after pasting the URL into the space.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Select the desired download option and click
                          "Download."
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Look within the Download folder for the file or files
                          you downloaded.
                        </div>
                      </div>
                    </div>
                  </div>
                </div></van-swipe-item
              >
              <van-swipe-item>
                <div class="introducItem flex_ccenter">
                  <div class="item_img1">
                    <img
                      src="/static/app-iphone.webp"
                      class="img"
                      alt="Download TikTok video on iPhone and iPad"
                    />
                  </div>
                  <div class="item_img2" style="width: 290px">
                    <h2 class="swipert1">Download TikTok video</h2>
                    <h2 class="swipert2">
                      no watermark on the iPhone and iPad.
                    </h2>
                  </div>
                  <div class="item_3">
                    <h3 class="text_title">
                      It will not be possible for you to download using a
                      browser due to Apple's Security Policy. Don't worry,
                      though; we've created an easy-to-follow instruction that
                      will show you how to utilize SavingTik to download TikTok
                      videos fro."your iPhone or iPad (iOS).
                    </h3>
                    <div class="row_4 flex_column">
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Open the App Store and install the "Document by
                          Readdle" app.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Launch the TikTok app, select "Copy link" from the
                          menu, and hit the "Share" button to obtain the video
                          URL.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Tap the browser icon in the right corner to open the
                          document created by Readdle.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          After launching the browser, go to SavingTik.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Click "Download" after pasting the URL into the space.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          After selecting an option, click "Download."
                        </div>
                      </div>
                    </div>
                  </div>
                </div></van-swipe-item
              >
              <van-swipe-item>
                <div class="introducItem flex_ccenter">
                  <div class="item_img1">
                    <img
                      src="/static/pc.webp"
                      class="img"
                      alt="Download TikTok video on PC"
                    />
                  </div>
                  <div class="item_img2">
                    <h2 class="swipert1">Download TikTok video</h2>
                    <h2 class="swipert2">with no watermark on the PC</h2>
                  </div>
                  <div class="item_3">
                    <h3 class="text_title">
                      The instructions listed below will allow you to download
                      high-quality video TikTok from your PC.
                    </h3>
                    <div class="row_4 flex_column">
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          To obtain the link, select "Copy link" from the Tiktok
                          app or tiktok.com by hitting the "Share" button.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Visit SavingTik with the browser of your choice.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Copy the URL, then hit "Download" on the form.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Select a download choice and hit the download button.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          In the Download folder, locate the file or files you
                          downloaded.
                        </div>
                      </div>
                    </div>
                  </div>
                </div></van-swipe-item
              >
            </van-swipe>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper_view flex_center">
      <img src="/static/swiper.png" class="img" alt="swiper" />
      <div>Swipe left or right to view</div>
    </div>
    <div class="app_footer">
      <div class="page_content container-tt">
        <div class="faqs">
          <div class="flex_center">
            <h3 class="faq_title">- SavingTik FAQ and Tips -</h3>
          </div>
          <div class="faq_content">
            <div id="faq" itemscope="" itemtype="https://schema.org/FAQPage">
              <div
                itemprop="mainEntity"
                itemscope=""
                itemtype="https://schema.org/Question"
                class="faq_item shou"
                @click="changeFaqItemOpen(item, k)"
                :key="k"
                v-for="(item, k) in list"
              >
                <button style="width: 100%">
                  <div class="itemTitle flex_between">
                    <h5 itemprop="name" class="tit">{{ item.title }}</h5>
                    <div class="imgs">
                      <div v-if="!item.isOpen" class="opentriangle"></div>
                      <div v-else class="closetriangle"></div>
                    </div>
                  </div>
                </button>
                <div
                  itemprop="acceptedAnswer"
                  itemscope=""
                  itemtype="https://schema.org/Answer"
                >
                  <div
                    itemprop="text"
                    class="faq_text"
                    :class="item.isOpen ? '' : 'isBlock'"
                  >
                    <template v-if="item.textContent">
                      {{ item.textContent }}
                    </template>
                    <ul v-else>
                      <li :key="i" v-for="(item1, i) in item.text">
                        {{ item1 }}
                      </li>
                    </ul>
                    <div v-if="item.b">
                      <b>{{ item.b.btit }}</b>
                      <div style="word-wrap: break-word">
                        {{ item.b.burl }}
                      </div>
                      <div>{{ item.b.btext }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <pc-footer></pc-footer>
        </div>
      </div>
    </div>

    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <div class="app_page_bottom">
      <app-footer></app-footer>
    </div>

    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
    <!-- <component :is="dialogComponent" v-if="dialogComponent" ref="popupAppRef" /> -->
    <iframe ref="hiddenIFrame" style="display: none"></iframe>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import dataList from "@/static/faqs.js";
import { handleClick } from "@/plugins/Firebase.js";
import CryptoJS from "crypto-js";
import { ImagePreview } from "vant";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
export default {
  components: { language, PcFooter, AppFooter, VanPopupapp },
  head: {
    htmlAttrs: {
      lang: "en",
    },
    bodyAttrs: {
      "data-lang": "en",
    },
    title:
      "Tiktok Downloader - Download Video tiktok Without Watermark online - SavingTik",
    meta: [
      { charset: "utf-8" },
      { property: "og:locale", content: "en" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
      },
      { name: "format-detection", content: "telephone=no" },
      { "http-equiv": "X-UA-Compatible", content: "IE=edge" },
      // Search Engines
      { name: "robots", content: "index, follow" },
      { name: "googlebot", content: "index, follow" },
      { name: "google-site-verification", content: "" },
      { name: "y_key", content: "" },
      { name: "msvalidate.01", content: "" },
      { name: "revisit-after", content: "1 days" },
      //Page Information
      {
        name: "description",
        content:
          "SavingTik.com: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos  from any device you have, with or without watermarks.",
      },
      { name: "copyright", content: "SavingTik" },
      { name: "author", content: "SavingTik" },
      //Schema.org Microdata
      {
        itemprop: "name",
        content:
          "Tiktok Downloader - Download Video tiktok Without Watermark - SavingTik",
      },
      { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
      // Facebook / OpenGraph
      {
        property: "og:title",
        content:
          "Tiktok Downloader - Download Video tiktok Without Watermark - SavingTik",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "https://savingtik.com/" },
      { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
      {
        property: "og:description",
        content:
          "SavingTik.com: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos  from any device you have, with or without watermarks.",
      },
      //Twitter
      { name: "twitter:card", content: "summary" },
      { name: "twitter:url", content: "https://savingtik.com/" },
      {
        name: "twitter:title",
        content:
          "Tiktok Downloader - Download Video tiktok Without Watermark - SavingTik",
      },
      {
        name: "twitter:description",
        content:
          "SavingTik.com: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos  from any device you have, with or without watermarks.",
      },
      { name: "twitter:image", content: "/static/logo/savingtik-thumb.webp" },
      //Metro Tiles

      //multilingual
      {
        name: "google",
        content: "notranslate",
      },
    ],
    link: [
      // Favicons
      {
        rel: "shortcut icon",
        href: "/static/logo/favicon.png",
        sizes: "512x512",
      },
      {
        rel: "apple-touch-icon",
        href: "/static/logo/favicon.png",
        sizes: "192x192",
      },
      //Apple Touch Icons

      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savingtik.com/",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savingtik.com/",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savingtik.com/in",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savingtik.com/vn",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savingtik.com/tr",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savingtik.com/id",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savingtik.com/fr",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savingtik.com/pt",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savingtik.com/ru",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savingtik.com/es",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savingtik.com/ms",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savingtik.com/ko",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savingtik.com/ja",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savingtik.com/jv",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savingtik.com/cs",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savingtik.com/de",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savingtik.com/it",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savingtik.com/pl",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savingtik.com/hu",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savingtik.com/nl",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savingtik.com/ro",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savingtik.com/el",
      },
      {
        rel: "canonical",
        href: "https://savingtik.com/",
      },
    ],
    script: [
      {
        json: {
          "@context": "https://schema.org",
          "@type": "WebSite",
          name: "Tiktok Downloader - Download Video Tiktok Without Watermark online - SavingTik",
          url: "https://savingtik.com",
          description:
            "SavingTik: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos  from any device you have, with or without watermarks.",
          publisher: {
            "@type": "Organization",
            name: "SavingTik",
            logo: {
              "@type": "ImageObject",
              url: "https://savingtik.com/static/logo.svg",
            },
          },
        },
        type: "application/ld+json",
      },
      {
        json: {
          "@context": "http://schema.org",
          "@type": "Organization",
          name: "SavingTik",
          url: "https://savingtik.com",
          logo: "https://savingtik.com/static/logo.svg",
          image: "https://savingtik.com/images/icons/savingtik-thumb.webp",
          description:
            "SavingTik: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos from any device you have, with or without watermarks",
          email: "happyfish2024@gmail.com",
        },
        type: "application/ld+json",
      },
    ],
  },
  name: "IndexPage",
  data() {
    return {
      showSwiper: false,
      showBigImage: false,
      showAppRight: false,
      list: dataList.listEn,
      // list: [
      //   {
      //     isOpen: false,
      //     title: "How to Download video Tiktok no watermark?",
      //     text: [
      //       `Open your web browser or the TikTok app on your phone.on your phone.`,
      //       `Select the desired video to download.`,
      //       `On the lower right corner, click the Share button.`,
      //       `To copy a link, click its button.`,
      //       `Utilizing your browsers, download: For you, I want to keep things accessible. There's no software to install or download. For this reason, too, I created an application that you can install whenever you'd like.`,
      //       `Return to SvaingTik.COM, insert your download URL into the above form, and press the "Download" button.`,
      //       `Save the video to your device after giving our server time to finish its task.`,
      //     ],
      //   },
      //   {
      //     isOpen: false,
      //     title: "How can I get the download link for the TikTok video?",
      //     text: [
      //       `Get the TikTok app open.`,
      //       `Select the TikTok video you wish to save.`,
      //       `Click Share, then locate the Copy Link button under the Share options.`,
      //       `The clipboard is ready for your download URL.`,
      //     ],
      //     b: {
      //       btit: `The URL might seem like this, for instance: `,
      //       burl: `https://www.tiktok.com/@oceanicexpeditions/video/7269518464732220718, or
      //   https://vt.tiktok.com/ZSNAxQXRW/,or https://vt.tiktok.com/ZSNA9UeQu/,`,
      //       btext: `among other places...`,
      //     },
      //   },
      //   {
      //     isOpen: false,
      //     title: "After being downloaded, where are TikTok videos saved?",
      //     textContent: `Files that you download are typically saved into the default folder
      // that you have selected. This folder is often set for you by your
      // browser. You may choose manually and modify the destination folder
      // for your downloaded TikTok movies in the browser's settings.`,
      //   },
      //   {
      //     isOpen: false,
      //     title:
      //       "Does SvaingTik.COM save copies of videos, or does it download them?",
      //     textContent: `SavingTik does not store videos. App, and I also don't save copies of
      // videos I download. TikTok's servers hold all of the videos.
      // Additionally, I don't monitor our users' download histories, thus
      // utilizing SavingTik.The app is completely anonymous.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: "Do instructions or extensions need to be installed?",
      //     textContent: `Nope. My goal is to make things simple for our users. Your TikTok
      // download video URLs are all you need. That is all.`,
      //   },
      //   {
      //     isOpen: false,
      //     title:
      //       "Does Tiktok Downloader (SvaingTik) sans watermark require payment?",
      //     textContent: `No, there are no costs associated with using our program, as it is
      // always free. You can help us by donating money or turning off your
      // ad blocker. It encourages us to keep growing.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: `How can I download and store my preferred TikTok mp4 movies on my
      // iPhone (iOS)?`,
      //     textContent: `You are not allowed to download any movies, music, or videos to your
      // iPhone running any version of iOS 12 or lower due to Apple's privacy
      // policies. To download Tiktok movies from SvaingTik using Safari, you
      // should update to the most recent version of iOS. Please refer to the
      // guide on downloading TikTok videos on your iPhone without a
      // watermark if you cannot do so.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: `Can I download videos from TikTok to my Android phone?`,
      //     textContent: `YYes, using SavingTik is preferable if you want to store TikTok films
      // on your Android phone without a watermark. SavingTik is entirely free,
      // extremely quick, and updated often.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: `Can I download TikTok videos from SvaingTik to an extent?`,
      //     textContent: `No, this feature is not yet supported by SavingTik.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: ` Can all the videos be from a specific TikTok or Htags channel using
      // SvaingTik?`,
      //     textContent: `No, this feature is not yet supported by SavingTik.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: `Can I get high-definition videos from SvaingTik?`,
      //     textContent: `The TikTok video downloader that offers you the best resolution is
      // called SavingTik. We will instantly provide a high-quality download
      // link if we locate a TikTok movie with Full HD or a better solution,
      // so you can get it.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: `I downloaded a TikTok video from SvaingTik. Is it editable?`,
      //     textContent: `No, SavingTik does not support video editing; it is merely a tool for
      // downloading TikTok videos. Utilise specialized PC or phone video
      // editing applications.`,
      //   },
      //   {
      //     isOpen: false,
      //     title: `Does SvaingTik offer a way to download tiktok MP3s?`,
      //     textContent: `SvaingTik offers this solution. You are not permitted to use or
      // monetize the TikTok mp3 music that you download for commercial
      // purposes. Additionally, SvaingTik honors the tracks' intellectual
      // property rights.`,
      //   },
      // ],
      input: "",
      dloading: false,

      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
      dialogComponent: null,
    };
  },
  computed: {
    ...mapGetters(["language"]),
  },
  mounted() {
    this.$router.push('/');
    // if (this.language != "en") {
    //   this.$router.push(this.language);
    // } else {
    //   this.$router.push("/");
    // }
    //到达首页
    handleClick("guide_homepage");
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
    window.addEventListener("resize", () => {
      if (window.innerWidth < 1200) {
        this.showSwiper = true;
      }
    });
    let width = window.innerWidth;
    this.$nextTick(() => {
      if (width < 1200) {
        this.showSwiper = true;
      }
    });
  },
  methods: {
    // async showAppRightHandel() {
    //   // import VanPopupapp from "@/components/vanPopupapp.vue";
    //   if (!this.dialogComponent) {
    //     this.dialogComponent = () => import("@/components/vanPopupapp.vue");
    //     const loadedComponent = await import("@/components/vanPopupapp.vue");
    //     this.dialogComponent = loadedComponent.default || loadedComponent;
    //   }
    //   this.$nextTick(() => {
    //     this.$refs.popupAppRef.open();
    //   });
    // },
    async showAppRightHandel() {
      // if (!this.dialogComponent) {
      //   this.dialogComponent = () => import("@/components/vanPopupapp.vue");
      //   const loadedComponent = await import("@/components/vanPopupapp.vue");
      //   this.dialogComponent = loadedComponent.default || loadedComponent;
      // }
      this.$nextTick(() => {
        this.$refs.popupAppRef.open();
      });
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
    downInput(e) {
      // 粘贴链接到输入框 action_tt_paste
      handleClick("action_tt_paste", {
        islink: e.target.value,
        from: "video",
      });
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    encrypt(message, key, iv) {
      const cipherText = CryptoJS.DES.encrypt(
        message,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
        }
      ).toString();
      return cipherText;
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.Download();
        event.preventDefault();
        return false;
      }
    },
    async allIn() {
      //点击开始下载按钮 action_tt_download_start
      handleClick("action_tt_download_start", {
        site: "all",
        from: "video",
      });
      // 设定 URL 数组

      // 通过 map 返回一个 Promise 数组
      let promises = this.downData.images.map((url) =>
        this.handleDownloadImages(url)
      );

      // 等待所有 Promise 完成
      await Promise.all(promises);
      this.dloading = false;
    },
    async handleDownloadImages(src) {
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        // //开始下载 tt_download_start
        handleClick("tt_download_start", {
          site: "all",
          from: "video",
        });
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    async handleDownload(src, fileName, type) {
      if (type == "image") {
        //点击开始下载 action_tt_download_start
        handleClick("action_tt_download_start", {
          site: "story",
          from: "video",
        });
      } else if (type == "video") {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "video",
          from: "video",
        });
      } else {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "mp3",
          from: "video",
        });
      }
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        this.dloading = false;
        if (type == "image") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "story",
            from: "video",
          });
        } else if (type == "video") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "video",
            from: "video",
          });
        } else {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "mp3",
            from: "video",
          });
        }
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    encryptUrl(url, key, iv) {
      // DES 加密
      let encrypted = CryptoJS.DES.encrypt(
        `m=url&url=${encodeURIComponent(url)}`,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      // 转 Base64
      let base64String = encrypted.toString();
      // URL 编码
      let result = encodeURIComponent(base64String);
      // 最终结果
      return `https://savingtik.com/tt.php?v=${result}`;
    },
    decryptUrl(encryptedUrl, key, iv) {
      // URL 解码
      const decodedUrl = decodeURIComponent(encryptedUrl);

      // Base64 解码
      const parsedWordArray = CryptoJS.enc.Base64.parse(decodedUrl);

      // DES解密
      const decrypted = CryptoJS.DES.decrypt(
        {
          ciphertext: parsedWordArray,
        },
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      return decrypted.toString(CryptoJS.enc.Utf8);
    },
    async Download() {
      // 早些返回以避免嵌套
      if (this.isHttpLoading || this.input === "") return;
      this.downData = {};
      this.httpError = false;
      this.downStorySuccess = false;
      this.downSuccess = false;
      const tiktokUrlPattern = new RegExp("^http(s|)://.*tiktok.com.*/.*$");
      if (!tiktokUrlPattern.test(this.input)) {
        //点击解析下载按钮 action_tt_detect_bottom
        handleClick("action_tt_detect_bottom", {
          site: "other",
          noislink: this.input,
          from: "video",
        });
        this.httpError = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮 action_tt_detect_bottom
      handleClick("action_tt_detect_bottom", {
        site: "tt",
        from: "video",
      });
      //开始解析  tt_start_resolve
      handleClick("tt_start_resolve", {
        islink: this.input,
        from: "video",
      });
      this.isHttpLoading = true;

      try {
        let result = this.encryptUrl(this.input, process.env.DES_KEY, process.env.DES_IV);
        const response = await fetch(result, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });
        let encryptedResponse = await response.text();
        let decryptedResponse = this.decryptUrl(
          encryptedResponse,
          process.env.DES_KEY,
          process.env.DES_IV
        ); // 使用你的解密函数
        let data = JSON.parse(decryptedResponse).data;
        // 检查数据是否存在
        if (!data) {
          this.httpError = true;
          this.isHttpLoading = false;
          return;
        }

        if (!data.images) {
          await this.fetchVideoAttributes(data);
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "video",
            from: "video",
          });
        } else {
          this.downData = data;
          this.downStorySuccess = true;
          this.isHttpLoading = false;
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "story",
            from: "video",
          });
        }
      } catch (error) {
        //解析失败  tt_resolve_fail
        handleClick("tt_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "video",
        });
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },
    previewImage(item, k) {
      ImagePreview({
        images: this.downData.images,
        startPosition: k,
      });
    },
    dianji() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    async fetchVideoAttributes(data) {
      try {
        const videoBlob = await fetch(data.video_url).then((res) => res.blob());
        this.WithoutVideoSize = `${(videoBlob.size / (1024 * 1024)).toFixed(
          2
        )} MB`;
        // const videoBlob1 = await fetch(this.input).then((res) => res.blob());
        // this.VideoSize  = `${(videoBlob1.size / (1024 * 1024)).toFixed(
        //   2
        // )} MB`;
        const video = document.getElementById("video");
        video.setAttribute("src", data.video_url);
        video.crossOrigin = "anonymous";
        video.innerHTML = `<source src=${data.video_url} type="audio/mp4" >`;

        await new Promise((resolve) =>
          video.addEventListener("canplaythrough", () => {
            this.duration = this.formatSeconds(video.duration);
            resolve();
          })
        );

        await new Promise((resolve) => {
          const image = new Image();
          image.onload = resolve;
          image.src = data.cover;
        });

        this.downData = data;
        this.isHttpLoading = false;
        this.downSuccess = true;
      } catch (error) {
        console.error(error);

        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    formatSeconds(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds - hours * 3600) / 60);
      const secs = Math.floor(seconds % 60);

      // 使用模板字符串清理时间格式化
      const time = [
        hours ? (hours > 9 ? hours : `0${hours}`) : undefined,
        minutes > 9 ? minutes : `0${minutes}`,
        secs > 9 ? secs : `0${secs}`,
      ]
        .filter(Boolean)
        .join(":");

      return time;
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/static/style/index.css";
.dloading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;

  .loader {
    width: 88px;
    height: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loader:before {
    content: "";
    width: 148px;
    height: 10px;
    background: #202a68;
    position: absolute;
    top: 116px;
    left: -27px;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
  }

  .loader:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #202a68;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
  }

  @keyframes jump7456 {
    15% {
      border-bottom-right-radius: 3px;
    }

    25% {
      transform: translateY(9px) rotate(22.5deg);
    }

    50% {
      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }

    75% {
      transform: translateY(9px) rotate(67.5deg);
    }

    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes shadow324 {
    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.2, 1);
    }
  }
}
.loading-dots {
  position: relative;
  z-index: 999;
  margin-top: 70px;
}

.dot {
  background-color: #83818c;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  animation: loading-animation 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.5s;
}

.dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes loading-animation {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
</style>